<template>
    <view class="certificate-container">
        <view class="page-header">
            <view class="header-title">证书详情</view>
            <view class="header-subtitle">查看证书的详细信息</view>
        </view>

        <view class="content-section">
            <view class="section-header">
                <view class="section-title">
                    <view class="title-decoration"></view>
                    <text>证书信息</text>
                </view>
            </view>
            <view class="certificate-detail">
                <!-- 证书图片展示区 -->
                <view class="certificate-gallery">
                    <swiper 
                        class="gallery-swiper" 
                        :indicator-dots="certificateImages.length > 1"
                        indicator-color="rgba(0, 0, 0, 0.3)"
                        indicator-active-color="#2cbaff"
                        :autoplay="false"
                        circular
                        @change="onSwiperChange"
                    >
                        <swiper-item v-for="(image, index) in certificateImages" :key="index">
                            <image 
                                class="certificate-image" 
                                mode="aspectFit" 
                                :src="image" 
                                @click="previewImage(index)"
                            />
                        </swiper-item>
                    </swiper>
                    
                    <view class="image-counter" v-if="certificateImages.length > 1">
                        <text>{{ currentImageIndex + 1 }}/{{ certificateImages.length }}</text>
                    </view>
                </view>
                
                <view class="info-item">
                    <view class="info-label">持证人：</view>
                    <view class="info-value">{{pageData.userName}}</view>
                </view>
                
                <view class="info-item">
                    <view class="info-label">更新时间：</view>
                    <view class="info-value">{{timestampToDate(pageData.updateTime)}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
    import api from '@/utils/api.js';
    import { reactive, ref, computed } from 'vue';
    import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import { timestampToDate, globalData } from '@/utils/util';
    
    let pageData = reactive({});
    let imageUrls = ref([]);
    let currentImageIndex = ref(0);
    
    // 计算证书图片列表
    const certificateImages = computed(() => {
       if (pageData.certificateUrl) {
            // 处理单张图片或者逗号分隔的多张图片
            const urls = pageData.certificateUrl.split(',').map(url => globalData.OSS_URL + url.trim());
            return urls;
        }
        return [];
    });
    
    // 轮播图切换事件
    const onSwiperChange = (e) => {
        currentImageIndex.value = e.detail.current;
    };
    
    // 预览大图
    const previewImage = (index) => {
        uni.previewImage({
            urls: certificateImages.value,
            current: index,
            indicator: 'number',
            loop: true
        });
    };
    
    const getDetail = async (certificateId) => {
        await api.certificateInfoDetail({certificateId}).then((res) => {
            pageData = Object.assign(pageData, res.data);
        });
    }
    
    onLoad((options) => {
        getDetail(options.certificateId);
    });

    // 分享给朋友
    onShareAppMessage(() => {
        // 使用路由参数
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        const certificateId = currentPage.options?.certificateId;
        
        return {
            title: `${pageData.userName || ''}的证书 - 飞手之家`,
            path: certificateId ? `/pages/certificateDetail/certificateDetail?certificateId=${certificateId}` : '/pages/certificateDetail/certificateDetail',
            imageUrl: certificateImages.value && certificateImages.value.length > 0 ? certificateImages.value[0] : '/static/images/head.jpg'
        };
    });

    // 分享到朋友圈
    onShareTimeline(() => {
        // 使用路由参数
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        const certificateId = currentPage.options?.certificateId;
        
        return {
            title: `${pageData.userName || ''}的证书 - 飞手之家`,
            query: certificateId ? `certificateId=${certificateId}` : '',
            imageUrl: certificateImages.value && certificateImages.value.length > 0 ? certificateImages.value[0] : '/static/images/head.jpg'
        };
    });
</script>
<style lang="scss" scoped>
    .certificate-container {
        background-color: #f6f8fa;
        min-height: 100vh;
        padding-bottom: 40rpx;
    }

    .page-header {
        background-color: #2cbaff;
        padding: 40rpx 40rpx 60rpx;
        color: #fff;
        position: relative;
        margin-bottom: 30rpx;
    }

    .header-title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .header-subtitle {
        font-size: 26rpx;
        opacity: 0.9;
    }

    .content-section {
        width: 92%;
        margin: 0 auto 30rpx;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }

    .section-header {
        margin-bottom: 30rpx;
    }

    .section-title {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .title-decoration {
        width: 8rpx;
        height: 32rpx;
        background-color: #2cbaff;
        border-radius: 4rpx;
        margin-right: 16rpx;
    }

    .certificate-detail {
        padding: 20rpx;
    }

    .certificate-gallery {
        position: relative;
        margin-bottom: 30rpx;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    
    .gallery-swiper {
        width: 100%;
        height: 300rpx;
        border-radius: 12rpx;
    }

    .certificate-image {
        width: 100%;
        height: 300rpx;
        border-radius: 12rpx;
        display: block;
    }
    
    .image-counter {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 24rpx;
        padding: 6rpx 20rpx;
        border-radius: 30rpx;
        z-index: 10;
    }

    .info-item {
        display: flex;
        margin-bottom: 20rpx;
        padding: 16rpx;
        background-color: #f9f9f9;
        border-radius: 8rpx;
    }

    .info-label {
        font-size: 28rpx;
        color: #666;
        min-width: 140rpx;
        font-weight: bold;
    }

    .info-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
    }
</style>